<template>
    <quill-editor class="editor"
                  v-model="content"
                  ref="myQuillEditor"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @change="onEditorChange($event)"
                  @ready="onEditorReady($event)"
                    >
    </quill-editor>
</template>
<script>
    import { quillEditor } from 'vue-quill-editor'
    export default {
        props:['content'],
        data() {
            return {
                // content:'',
                editorOption:{
                    modules:{
                        toolbar:[
                            // ['bold','italic','underline','strike'], // 加粗、倾斜、下划线、删除线

                            // [{'header':1},{'header':2}], // 标题一、标题二
                            // [{'list':'ordered'},{'list':'bullet'}], // 列表

                            // [{'color':[]},{'background':[]}], // 字体颜色、背景颜色
                        ]
                    }
                }
            };
        },
        methods:{
            onEditorReady(){ // 富文本准备时的事件

            },
            onEditorFocus(editor,val){ // 富文本获得焦点时的事件
                console.log(this.content); // 富文本获得焦点时的内容
                // editor.enable(false); // 在获取焦点的时候禁用
            },
            onEditorBlur(val){ // 富文本失去焦点时的事件
                // console.log(val.content); // 富文本失去焦点时的内容
            },
            onEditorChange(val){ // 富文本内容改变时的事件
                console.log(val); // 富文本改变时的内容
            }
        }
    }
</script>

<style>

    /*这里可以自定义样式以及安放的位置*/

</style>
